<template>
    <!-- 员工薪资档案 -->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-row style="padding-top: 25px; padding-left: 20px">
                <el-input
                  style="width: 200px"
                  placeholder="请输入关键字"
                  prefix-icon="el-icon-search"
                  v-model="form.paySlipsName"
                  @keyup.enter.native="search"
                >
                </el-input>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div
            class="grid-content bg-purple-dark-two"
            style="padding-top: 20px; padding-left: 20px"
          >
            <el-table :data="tableData" border="true" style="width: 79%">
              <el-table-column
                prop="paySlipsName"
                label="工资单"
                width="190"
                align="center"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="salaryName"
                label="薪资月份"
                width="190"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="state"
                label="已发放"
                width="150"
              >
                <template slot-scope="scope">
                  {{ scope.row.state == 1 ? "启用" : "禁用" }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="createTime" label="已确认">
              </el-table-column>
              <el-table-column align="center" prop="createTime" label="发布时间">
              </el-table-column>
              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="150"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.state == 1"
                    @click.native.prevent="switchPaySlip(scope.row.id, 2)"
                    type="text"
                  >
                    停用
                  </el-button>
                  <el-button
                    v-if="scope.row.state == 2"
                    @click.native.prevent="switchPaySlip(scope.row.id, 1)"
                    type="text"
                  >
                    启用
                  </el-button>
                  <el-button
                    @click.native.prevent="findPaySlip(scope.row.id)"
                    type="text"
                  >
                    修改
                  </el-button>
                  <el-button
                    @click.native.prevent="deletePaySlip(scope.row.id)"
                    type="text"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top: 15px; margin-left: -400px">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.currentPage"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
    
    <script>
  export default {
    data() {
      return {
        tableData: [],
        form: {
          currentPage: 1,
          pageSize: 5,
          paySlipsName: "",
        },
        formData: {
          id: undefined,
          paySlipsName: "",
          salaryId: "",
          wages: "",
          bonus: "",
          deductions: "",
          miscellaneous: "",
        },
        // 薪资下拉列表
        salaryList: [],
        total: 0,
      };
    },
    created() {
    },
    methods: {
      AddPayrollItems() {
        this.dialogVisible = true;
        this.sub = "创建项目";
        this.title = "添加工资条";
      },
      // 修改
      findPaySlip(id) {
        this.$http("paySlips/findPaySlip", { params: { id: id } }).then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data;
            this.formData.salaryId = res.data.data.salaryId;
            this.dynamicTags = res.data.data.wages;
            this.dynamicTags1 = res.data.data.bonus;
            this.dynamicTags2 = res.data.data.deductions;
            this.dynamicTags3 = res.data.data.miscellaneous;
            this.dialogVisible = true;
            this.sub = "修改项目";
            this.title = "修改工资条";
          } else {
            this.$message.error(res.data.data);
          }
        });
      },
      // 删除
      deletePaySlip(id) {
        this.$confirm("是否删除此方案, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$http("paySlips/deletePaySlip", {
            params: {
              id: id,
            },
          }).then((res) => {
            if (res.data.code === 200) {
              this.getPaySlipsList();
              this.$message(res.data.data);
            } else {
              this.$message.error(res.data.data);
            }
          });
        });
      },
      // 获取薪资方案
      getSalaryList() {
        this.$http("paySlips/getSalaryList").then((res) => {
          if (res.data.code === 200) {
            this.salaryList = res.data.data;
          } else {
            this.$message.error(res.data.data);
          }
        });
      },
      // 提交
      onSubmit() {
        //工资
        var gz = "";
        var tag1 = this.dynamicTags;
        for (let i = 0; i < tag1.length; i++) {
          if (gz == "") {
            gz += tag1[i];
          } else {
            gz += "," + tag1[i];
          }
        }
        this.formData.wages = gz;
        //奖金
        var bonus = "";
        var tag2 = this.dynamicTags1;
        for (let i = 0; i < tag2.length; i++) {
          if (bonus == "") {
            bonus += tag2[i];
          } else {
            bonus += "," + tag2[i];
          }
        }
        this.formData.bonus = bonus;
        //扣除项
        var deductions = "";
        var tag3 = this.dynamicTags2;
        for (let i = 0; i < tag3.length; i++) {
          if (deductions == "") {
            deductions += tag3[i];
          } else {
            deductions += "," + tag3[i];
          }
        }
        this.formData.deductions = deductions;
        //其他项
        var miscellaneous = "";
        var tag4 = this.dynamicTags3;
        for (let i = 0; i < tag4.length; i++) {
          if (miscellaneous == "") {
            miscellaneous += tag4[i];
          } else {
            miscellaneous += "," + tag4[i];
          }
        }
        this.formData.miscellaneous = miscellaneous;
  
        // 新增
        if (this.formData.id === undefined) {
          this.$http.post("paySlips/addPaySlips", this.formData).then((res) => {
            if (res.data.code === 200) {
              this.cancel();
              this.getPaySlipsList();
              this.$message(res.data.data);
            } else {
              this.$message.error(res.data.data);
            }
          });
        } else {
          this.$http.post("paySlips/updatePaySlips", this.formData).then((res) => {
            if (res.data.code === 200) {
              this.cancel();
              this.getPaySlipsList();
              this.$message(res.data.data);
            } else {
              this.$message.error(res.data.data);
            }
          });
        }
      },
      // 停启用
      switchPaySlip(id, state) {
        if (state == 1) {
          this.$confirm("是否启用此方案, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$http("paySlips/switchPaySlip", {
              params: {
                id: id,
                state: state,
              },
            }).then((res) => {
              if (res.data.code === 200) {
                this.getPaySlipsList();
                this.$message(res.data.data);
              } else {
                this.$message.error(res.data.data);
              }
            });
          });
        } else {
          this.$confirm("是否停用此方案, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$http("paySlips/switchPaySlip", {
              params: {
                id: id,
                state: state,
              },
            }).then((res) => {
              if (res.data.code === 200) {
                this.getPaySlipsList();
                this.$message(res.data.data);
              } else {
                this.$message.error(res.data.data);
              }
            });
          });
        }
      },
      // 取消
      cancel() {
        this.dialogVisible = false;
        this.formData = {
          id: undefined,
          projectName: "",
          projectType: "",
          roundingRules: "",
          retain: "",
          remark: "",
        };
      },
      // 获取薪资方案列表
      search() {
        this.getPaySlipsList();
      },
      getPaySlipsList() {
        this.$http.post("paySlips/getPaySlipsList", this.form).then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.rows;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.data);
          }
        });
      },
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        this.form.currentPage = 1;
        this.form.pageSize = val;
        this.getPaySlipsList();
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.form.currentPage = val;
        this.getPaySlipsList();
      },
    },
  };
  </script>
    
    <style scoped>
  .block {
    padding-left: 800px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: white;
    height: 90px;
  }
  .bg-purple-dark-two {
    background: white;
    height: 600px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .u21705_div {
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 3px;
    height: 20px;
    background: inherit;
    background-color: rgba(24, 144, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 14px;
  }
  </style>